<template>
    <div class="test2" style="width:1000px;height:300px;">
        <div id="myChart4" style="width:100%;height:300px;float:left;"></div>
    </div>
</template>

<script>
export default {
  name: "ziChan",
  data () {
    return {
      myChart4: '',
      opinion: ['第一轮', '第二轮','第三轮','第四轮','第五轮','第六轮','第七轮','第八轮','第九轮','第十轮','第十一轮','第十二轮'],
      opinionData: [
        { value: 15},
        { value: 30},
        { value: 30},
        { value: 85},
        { value: 30},
        { value: 70},
        { value: 25},
        { value: 90},
        { value: 60},
        { value: 10},
        { value: 30},
        { value: 40},
      ]
    }
  },
  props: {
    data1: []
  },
  watch: {
    data1(res){
      this.drawLine4(res);
    }
  },
  // mounted: function () {
  //   this.drawLine4()
  // },
  methods: {
    drawLine4 (res) {
      console.log("子组件获取："+res[0].roundAssets)
      for (var i = 0; i < 12; i++) {
        this.opinionData[i].value = res[i].roundAssets
      }
      this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
      this.myChart4.setOption({
        title: {
          text: '阶段资产',
          x:'center',
          y:10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        xAxis: {
          data: this.opinion,
        },
        yAxis: {
        },
        series: [{
          name: '阶段资产',
          type: 'bar',
          barWidth:40,
          data: this.opinionData,
           // 条形图上方显示数据
           label:{
            show:true,
            position:'top',
            textStyle:{
              // color:'#000',
              fontSize:16,
              fontWeight:600
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            color: function (params) {
              // 自定义颜色
              var colorList = ['#0099FC','#FF82AB','#FF7F00','#CD6839','#8B658B','#CDCD00','#A2CD5A','#97FFFF','#7FFFD4','#9370DB','#90EE90','#FFDEAD','#E6E6FA']
              return colorList[params.dataIndex]
            }
          }
        }]
      })
    }
  }
}
</script>
